<template>
	<view class="container999" @touchstart="refreshStart" @touchmove="refreshMove" @touchend="refreshEnd">
		<!-- 刷新组件需搭配scroll-view使用，并在pages.json中添加 "disableScroll":true-->
		<refresh ref="refresh" @isRefresh="isRefresh"></refresh>
		
			<view v-for="(listItem, listIndex) in list" :key="listIndex">
				<scroll-view style="height: 100vh;" scroll-y="true" @scrolltolower="lower1" scroll-with-animation :scroll-into-view="toView">
					<view :id="'top' + listIndex" style="width: 100%;height: 20rpx;"> </view>
					<view class="content">
						<view class="card" v-for="(item, index) in listItem" v-if="listItem.length > 0 && listIndex !=3" :key="index" @click="gotoRepo(item)">
							<view style="width: 100%;overflow: hidden;text-overflow:ellipsis;">
								<image style="width: 48rpx;height: 48rpx;float: left;" :src="item.owner.avatar_url"></image>
								<view style="word-break: break-all;overflow: hidden;text-overflow:ellipsis;width: 600rpx; ">
									<text  style="line-height: 50rpx;margin-left: 10rpx;font-size: 32rpx;font-weight: bold;"> {{item.full_name}} </text>
								</view>
							</view>
							<view class="desc uni-bold" style="margin-top: 5rpx;color: #999;">
								最近更新 {{timeToString(item.updated_at)}}
							</view>
							<view class="desc" style="margin-top: 5rpx;color: #999;">
								{{item.description}}
							</view>
							<view class="info" style="margin-top: 15rpx;font-weight: bold;height: 30rpx ; line-height: 30rpx;">
								<image src="../../static/code.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.language}}</text>
								<image src="../../static/star_in.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.stargazers_count}}</text>
								<image src="../../static/eye.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.watchers_count}}</text>
								<image src="../../static/fork.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 15rpx;"></image>
								<text style="margin-right: 40rpx;">{{item.forks_count}}</text>
							</view>
						</view>
					</view>
					<view class="noCard" v-if="listItem.length === 0">暂无信息</view>
					<view style="width: 100%;height: 20upx;opacity:0;">底部占位盒子</view>
				</scroll-view>
			</view>
	</view>
</template>

<script>
const util = require('../../utils/util.js');
import refresh from '../../components/refresh.vue';
import navTab from '../../components/navTab.vue';
import tabBar4 from '../../components/tabBar4.vue';
import http from '../../utils/http/index.js'

export default {
	components: { refresh, navTab, tabBar4 },
	data() {
		return {
			currentPage: 'index',
			toView: '', //回到顶部id
			tabTitle: ['公开'], //导航栏格式 --导航栏组件
			currentTab: 0, //sweiper所在页
			pages: [1], //第几个swiper的第几页
			list: [[]] ,//数据格式
			lan_id : 0.,
			url : ''
		};
	},
	onLoad(e) {
		uni.setNavigationBarTitle({
			title : "我的仓库"
		})
		uni.showLoading({})
		this.isRefresh()
	},
	onShow() {},
	onHide() {},
	methods: {
		timeToString(utc){
			if(!utc){
				return '00'
			}
			if(!isNaN(utc)){
				return utc >= 10 ? utc : '0' + utc
			}
			let d = new Date(utc);
			let datetime=d.getFullYear() 
			+ '-' 
			+ this.timeToString(d.getMonth() + 1)
			+ '-' 
			+ this.timeToString(d.getDate())
			+ ' ' 
			+ this.timeToString(d.getHours())
			+ ':' 
			+ this.timeToString(d.getMinutes())
			+ ':' 
			+ this.timeToString(d.getSeconds());
			return datetime
		},
		gotoRepo(item){
			uni.navigateTo({
				url: '../common/repo?name='+item.namespace.path+'&repo='+item.path
			})
		},
		toTop() {
			this.toView = '';
			setTimeout(() => {
				this.toView = 'top' + this.currentTab;
			}, 10);
		},
		// 其他请求事件 当然刷新和其他请求可以写一起 多一层判断。
		isRequest() {
			return new Promise((resolve, reject) => {
				if (this.list[0].length > 0){
					this.pages[0]++;
				}
				
				http.get("v5/user/repos?sort=created&type=personal",{page:this.pages[0],access_token : uni.getStorageSync('access_token')}).then(res => {
					uni.hideLoading();
					resolve(res.data)
				}).catch(res => {
					if (this.pages[0] > 0){
						this.pages[0] --
					}
					uni.hideLoading()
					uni.showToast({
						title:"请求数据失败 , 请稍后重试"
					})
					this.$refs.refresh.endAfter(null);
				})
			});
		},
		// swiper 滑动
		swiperTab: function(e) {
			var index = e.detail.current; //获取索引
			this.$refs.navTab.longClick(index);
		},
		// 加载更多 util.throttle为防抖函数
		lower1: util.throttle(function(e) {
			// console.log(`加载${this.currentTab}`); //currentTab表示当前所在页数 根据当前所在页数发起请求并带上page页数
			uni.showLoading({
				title: '加载中',
				mask: true
			});
			this.isRequest().then(res => {
				let tempList = this.list;
				tempList[0] = tempList[0].concat(res);
				this.list = tempList;
				this.$forceUpdate(); //二维数组，开启强制渲染
			});
		}, 300),
		// 刷新touch监听
		refreshStart(e) {
			this.$refs.refresh.refreshStart(e);
		},
		refreshMove(e) {
			this.$refs.refresh.refreshMove(e);
		},
		refreshEnd(e) {
			this.$refs.refresh.refreshEnd(e);
		},
		isRefresh() {
			this.pages[this.currentTab] = 1
			this.list[0] = []
			this.isRequest().then(res=>{
				uni.hideLoading()
				this.list[this.currentTab] = res
				this.$forceUpdate();
				this.$refs.refresh.endAfter(); //刷新结束调用
			})
		}
	}
};
</script>

<style lang="scss">
.container999 {
	width: 100vw;
	font-size: 28upx;
	min-height: 100vh;
	overflow: hidden;
	color: #6b8082;
	position: relative;
	background-color: #f6f6f6;
}
.content {
	width: 100%;
	font-size: 28upx;
}

.card {
	width: 90%;
	// height: 368upx;
	background-color: white;
	margin: 0 auto 30rpx auto;
	padding: 20rpx 20rpx;
	background: #ffffff;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
	border-radius: 5px;
	position: relative;
}

.noCard {
	width: 90%;
	height: 200upx;
	margin: auto;
	background-color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999999;
	box-shadow: 0 0 10upx 0 rgba(0, 0, 0, 0.1);
	border-radius: 10upx;
}
</style>
